<template>
  <a-card>
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item label="模板名称">
            <a-input placeholder="请输入标题" v-decorator="['linkName']"></a-input>
          </a-form-item>
          <a-form-item label="适用小程序">
            <a-select style="width:200px" v-decorator="['brandId']" placeholder="全部">
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select style="width:200px" v-decorator="['onlineState']" placeholder="全部">
              <a-select-option value="Y">
                启用
              </a-select-option>
              <a-select-option value="N">
                禁用
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" class="ml-10">重置</a-button>
            <a-button type="primary" class="ml-10" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="24" style="margin-top:20px">
        <a-table
          bordered
          :columns="columns"
          :rowKey="record => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :scroll="{ x: true }"
          @change="handleTableChange"
        >
          <span slot="brand" slot-scope="text, record">{{ searchBrand(record.brandId).name }}</span>
          <span slot="status" slot-scope="text, record">{{ record.onlineState == 'Y' ? '启用' : '禁用' }}</span>
          <span slot="action" slot-scope="text, record">
            <a @click="add(record)">编辑</a>
            <a @click="deleteRecord(record)" class="ml-10">删除</a>
          </span>
        </a-table>
      </a-col>
    </a-row>
    <message-form @close="handleCancel" v-if="showForm" :template="template"></message-form>
    <!-- <a-modal
      :title="formTile + '订阅消息模板'"
      :visible="showForm"
      width="60%"
      :confirm-loading="confirmLoading"
      :footer="null"
      @cancel="handleCancel"
    >
      <message-form @close="handleCancel" :template-id="templateId"></message-form>
    </a-modal>
    <a-modal
      :title="formTile + '订阅消息模板'"
      :visible="showEdit"
      width="60%"
      :confirm-loading="confirmLoading"
      :footer="null"
      @cancel="handleCancel"
    >
      <message-form @close="handleCancel" type="2" :record="message"></message-form>
    </a-modal> -->
    <!-- <a-drawer
      width="50%"
      :title="formTile + '订阅消息模板'"
      placement="right"
      :closable="false"
      :visible="showEdit"
      @close="onClose"
    >
      <message-form @close="handleCancel" type="2" :record="message"></message-form>
    </a-drawer> -->
  </a-card>
</template>

<script>
import messageForm from './form'
import { listMixin } from '../util/listMixin'
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'ID'
  },
  {
    title: '模板名称',
    dataIndex: 'linkName',
    key: 'name'
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '适用小程序',
    width: 200,
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: '模板ID',
    dataIndex: 'template'
  },
  {
    title: '状态',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime'
    // scopedSlots: { customRender: 'tags' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  mixins: [listMixin],
  components: { messageForm },
  data() {
    return {
      showEdit: false,
      confirmLoading: false,
      formTile: '新增',
      showForm: false,
      visible: false,
      message: null,
      columns,
      template: null,
      url: {
        list: '/jic-backend-wechat/wechat-client/template/link/list',
        delete: '/jic-backend-wechat/wechat-client/template/link'
      }
    }
  },
  methods: {
    handleCancel() {
      this.showEdit = false
      this.showForm = false
      this.templateId = -1,
      this.loadData()
    },
    showModal(record) {
      this.$confirm({
        title: '确定删除选中数据吗?',
        cancelText: '暂不',
        onOk: res => {
          console.log(res)
          return new Promise((resolve, reject) => {
            deleteAction(url.deleteBatch, { id: record.id })
              .then(res => {
                console.log(res)
                if (res.code == 200) {
                  resolve()
                  this.visible = false
                  if (this.dataSource.length == 1) {
                    this.pagination.current = 1
                  } else {
                    this.loadData()
                  }
                  this.$message.success('删除成功')
                } else {
                  this.$message.success(res.msg)
                }
              })
              .catch(err => {
                console.log(err)
              })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {}
      })
    },
    onClose() {
      this.showEdit = false
    },
    add(record) {
      if (record) {
        this.showForm = true
        this.template = record
        this.formTile = '编辑'
      } else {
        this.formTile = '新增'
        this.template = null
        this.showForm = true
      }
    }
  }
}
</script>

<style scoped>
#copy {
  position: absolute;
  opacity: 0;
}
.ml-10 {
  margin-left: 10px;
}
</style>
